<template>
  <div>
    <r-search
      ref="search"
      :searchData="searchData"
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :inline="true"
    />
    <div class="contentBattery">
      Electric Quantity Statistics：
      <div class="contentBatterydiv">
        Employ Electric Quantity：<span class="contentBatteryspan">{{
          totalParams ? totalParams + "kwh" : "0kwh"
        }}</span>
      </div>
    </div>
    <r-table
      :isPagination="true"
      :isHandle="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="pagination"
      :loading="tableLoading"
      :tableHandles="tableHandles"
      :isSelection="false"
      @refresh="page()"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: {
        deviceNo: "",
        beginTime: "",
        endTime: ""
      },
      searchForm: [
        {
          type: "input",
          placeholder: "Device Number",
          prop: "deviceNo",
          width: 240
        },
        {
          type: "date",
          placeholder: "Start Time",
          prop: "beginTime",
          width: 240,
          change: val => {
            this.searchData.beginTime = val;
          }
        },
        {
          type: "date",
          placeholder: "End Time",
          prop: "endTime",
          width: 230,
          change: val => {
            this.searchData.endTime = val;
          }
        }
      ],
      searchHandle: [
        {
          type: "primary",
          label: "Search",
          plain: true,
          handle: e => {
            this.zeroFn();
            this.getData();
          }
        },
        {
          label: "Reset",
          buttonss: true,
          icon: "el-icon-refresh-right",
          handle: e => {
            this.searchData = {
              orderNo: "",
              phone: "",
              status: null,
              payType: null
            };
            this.zeroFn();
            this.getData();
          }
        }
      ],
      tableLoading: false,
      tableData: [],
      tableCols: [
        { label: "Device Number", prop: "deviceNo" },
        {
          label: "Employ Electric Quantity",
          prop: "dayUse",
          formatter: e =>
            e.dayUse
              ? e.dayUse + "kwh"
              : e.dayUse === 0
              ? e.dayUse + "kwh"
              : "--"
        },
        {
          label: "Energy Meter Electric Quantity",
          prop: "currentUse",
          formatter: e =>
            e.currentUse
              ? e.currentUse + "kwh"
              : e.currentUse === 0
              ? e.currentUse + "kwh"
              : "--"
        },
        { label: "Meter Reading Time", prop: "ctime" }
      ],
      tableHandles: [
        {
          label: "Form Export",
          type: "primary",
          icon: "el-icon-download",
          // titles:
          //   "可以根据Device Number、Start Time、End Time筛选再Export，也可以不选，直接ExportWhole",
          plain: true,
          loading: false,
          handle: async e => {
            const res = await this.apis.deviceElectricExport(this.searchData);
            this.$message({
              type: res.code == 200 ? "success" : "error",
              message: res.code == 200 ? "success" : "error"
            });
            location.href = process.env.VUE_APP_URL + res.msg;
          }
        }
      ],
      pagination: { limit: 10, offset: 1, total: 0 },
      totalList: {},
      totalParams: 0
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    zeroFn() {
      this.pagination.limit = 10;
      this.pagination.offset = 1;
      this.pagination.total = 0;
    },
    async getData() {
      let parm = {
        ...this.searchData,
        ...{
          pageNum: this.pagination.offset,
          pageSize: this.pagination.limit
        }
      };
      var res = await this.apis.deviceElectricList(parm);
      this.tableData = res.rows || [];
      this.totalList = res.params || {};
      this.totalParams = res.params || 0;
      this.pagination.total = res.total;
    },
    page() {
      this.getData();
    }
  }
};
</script>

<style scoped lang="scss">
.contentBattery {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 15px;
  width: 800px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  left: 0px;
  top: 0;
}

.contentBatterydiv {
  width: 320px;
}

.contentBatterydiv:nth-child(1) {
  margin-left: 40px;
}

.contentBatteryspan {
  margin-right: 5px;
  color: #000cff;
}
</style>
